<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>购物车页</title>
    <!-- 禁止检查当前域名 -->
    <meta name="referrer" content="never">
    <!-- 网站图标 -->
    <link rel="shortcut icon" href="../images/logo1.png" />
    <!-- 初始化css文件：用来将所有浏览器中显示不一样的样式，变的一样 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 当前文件的css -->
    <link rel="stylesheet" href="../css/cart.css">
    <!-- 底部 -->
    <link rel="stylesheet" href="../css/xiaomi.css">
</head>

<body style="background-color: #f5f5f5">
    <!-- 顶部 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <img src="../images/logo1.png" alt="" style="width: 30px;height: 30px; margin-top: -4px;">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html">首页
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="list.html">列表页</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">推荐
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu province">
                            <li>
                                <a href="#bjjd">锤子</a>
                            </li>
                            <li>
                                <a href="#ahjd">菠萝</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入内容">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right login">
                    <!-- <li><a>欢迎用户<span>leon</span>来到小米商城！</a></li> -->
                    <!-- <li><a href="javascript:;" class="logout">退出</a></li> -->
                    <li>
                        <a href="login.html">登陆</a>
                    </li>
                    <li>
                        <a href="register.html">注册</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <!-- 面包屑 -->

    <div class="wrap " id="boxwrap">
        <div class="content">
            <ol class="breadcrumb" style="background-color: #fff;">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="list.html">列表页</a>
                </li>
                <li>
                    <a href="detail.html">详情页</a>
                </li>
                <!-- back() 方法可加载历史列表中的前一个 URL（如果存在）。
                    调用该方法的效果等价于点击后退按钮或调用 history.go(-1) -->
                <!-- <li><a href="javascript:history.back();">详情页</a></li> -->
                <li class="active">购物车页</li>
            </ol>
        </div>
    </div>

    <!-- 购物车列表 -->
    <div class="wrap cart" style="margin-top: 30px; margin-bottom: 70px;">
        <div class="content" style="margin-top: 20px; background-color: #fff">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="selectAll">
                        </th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr valign="bottom">
                        <td>
                            <input type="checkbox" name="selectOne">
                        </td>
                        <td>
                            <img src="http://pic.baike.soso.com/ugc/baikepic2/11812/cov-20190731150336-617026083_jpg_1280_879_74718.jpg/300"
                                width="50" height="50">
                        </td>
                        <td>德云社</td>
                        <td class="price">￥
                            <span>25.00</span>
                        </td>
                        <td class="number" data-stock="10" data-id="21">
                            <button class="btn btn-default reduce">-</button>
                            <input type="text" name="number" value="8">
                            <button class="btn btn-default add">+</button>
                        </td>
                        <td class="subtotal">￥
                            <span>200</span>
                        </td>
                        <td>
                            <button class="btn btn-danger remove">移除</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <input type="checkbox" name="selectAll">
                        </td>
                        <td colspan="2">商品总数：
                            <span class="totalNum">0</span>
                        </td>
                        <td colspan="2">商品总价：
                            <span class="totalPrice">0</span>
                        </td>
                        <td>
                            <a class="btn btn-primary" href="list.html">回列表页</a>
                        </td>
                        <td>
                            <a class="btn btn-warning" href="order.html">去结算</a>
                        </td>
                    </tr>
                </tfoot>
            </table>

            <!-- <div style="padding-left:10px;" class="jumbotron">
            <h1>购物车空空如也!</h1>
            <p>赶快去列表页挑选商品吧</p>
            <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
        </div> -->
        </div>
    </div>

   <!-- 推荐列表 -->
   <a href="" name="bjjd"></a>
   <div class="wrap" name="bjjd">
       <div class="content">
           <h1>为你推荐 <small>手机 电脑</small></h1>
           <div class="container fluid">
               <div class="row beijing" id="list">


               </div>
           </div>
       </div>
   </div>


    <!-- 底部 -->
    <div class="background-color">

        <div class="box6">
            <li>
                <a href="#">预约维修服务</a>
            </li>
            <li>
                <a href="#">7天无理由退货</a>
            </li>
            <li>
                <a href="#">15天免费换货</a>
            </li>
            <li>
                <a href="#">满69包邮</a>
            </li>
            <li style="border-right: none;">
                <a href="#">520余家售后网点</a>
            </li>
        </div>
    
    
        <div class="box7">
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd>服务支持</dd>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd>线下门店</dd>
                <dd>线下门店</dd>
                <dd>线下门店</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
            </dl>
            <dl style="border-right: 1px solid #e0e0e0">
                <dt>特色服务</dt>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
                <dd>账户管理</dd>
            </dl>
    
            <div class="box8">
                <p>400-100-5678</p>
                <span>8:00-18:00（仅收市话费）</span>
                <br>
                <a href="#">
                    <button>人工客服</button>
                </a>
            </div>
    
        </div>
    </div>
    

    <!-- 最下面 -->
<div class="wrap footer" style="height: 25px;  margin-bottom: 25px">
    <div class="content">
        <p></p>
    </div>
</body>

</html>
<!-- 引入js的库 -->
<script src="../lib/jquery.min.js"></script>
<!-- 引入bootstrap.js，bootstrap的js需要依赖一个js库 -->
<script src="../lib/bootstrap.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../utils/cookie.js"></script>
<script src="../utils/ajax.js"></script>
<script src="../js/checkLogin.js"></script>
<script src="../js/index.js"></script>
<script src="../js/cart.js"></script>